import { Card, Space, Breadcrumb, Upload, message, Button, Table, Popconfirm } from "antd"
import _ from "lodash";
import { UploadOutlined } from '@ant-design/icons';
import { useAdd_info } from "../../hook/add_commodityImage"

export default () => {
    const [{ _id,
        name, desc, guarantee, aftersale, storeCondition, place,
        specs, pack, sales, image, detailsImage
    }, { addCommodityImage, delCommodityImage, delCommDetailsImage }] = useAdd_info();
    console.log(detailsImage);

    const dataSource = [
        {
            key: '1',
            commodityName: name,
            commodityImg: image,
        },

    ];

    const detailsData = [
        {
            key: '1',
            commodityDetailsImg: detailsImage,
        },

    ];

    const columns = [
        {
            title: '商品名称',
            dataIndex: 'commodityName',
            key: 'commodityName',
        },
        {
            title: '商品图片',
            dataIndex: 'commodityImg',
            key: 'commodityImg',
            render: (image) => {
                return (
                    <div>
                        {image.map((item, index) => {
                            return <img onClick={() => delImg(_id, item)} src={`/res${item}`} key={index} style={{ width: "120px", height: "160px", margin: "10px 20px 10px 0", }} />
                        })}
                    </div>

                )
            }
        },
        {
            title: '上传功能',
            dataIndex: 'update',
            key: 'update',
            render: () =>
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>点击上传图片</Button>
                </Upload>
        },
    ];

    const columnsDetails = [
        {
            title: '商品详情图片',
            dataIndex: 'commodityDetailsImg',
            key: 'commodityDetailsImg',
            render: (detailsImg) => {
                return (
                    <div>
                        {detailsImg.map((item, index) => {
                            return <Popconfirm
                                title="此操作不可恢复是否确定删除?"
                                onConfirm={() => delDetailsImg(_id, item)}
                                onCancel={cancel}
                                okText="Yes"
                                cancelText="No"
                            >
                                <img key={index} src={`/res/${item}`} style={{ width: "120px", height: "160px", margin: "10px 20px 10px 0", }} />
                            </Popconfirm>
                        })}


                    </div>

                )
            }
        },
        {
            title: '上传功能',
            dataIndex: 'update',
            key: 'update',
            render: () =>
                <Upload {...detailsProps}>
                    <Button icon={<UploadOutlined />}>上传商品详情</Button>
                </Upload>
        },
    ];

    const props = {
        name: 'file',
        // 请求到资源服务器的地址
        action: '/res/commodity/addImg',
        headers: {
            authorization: 'authorization-text',
        },
        multiple: true,
        data: {
            _id: _id,
            // token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImNwIiwiaWF0IjoxNjM3OTc5OTU3LCJleHAiOjE2Mzg4NDM5NTd9.Pa5RAQr2YdOohFn9MtvmsiU-5qHA0SxCsFb1jnodQiY"
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                addCommodityImage(info.file.response);
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                // message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    // 上传商品详情图片
    const detailsProps = {
        name: 'file',
        // 请求到资源服务器的地址
        action: '/res/commodity/addDetailsImg',
        headers: {
            authorization: 'authorization-text',
        },
        data: {
            _id: _id,
            // token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImNwIiwiaWF0IjoxNjM3OTc5OTU3LCJleHAiOjE2Mzg4NDM5NTd9.Pa5RAQr2YdOohFn9MtvmsiU-5qHA0SxCsFb1jnodQiY"
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                addCommodityImage(info.file.response);
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                // message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    const delImg = (_id, url) => {
        delCommodityImage(_id, url)
    };
    const delDetailsImg = (_id, url) => {
        delCommDetailsImage(_id, url)
    };


    function cancel(e) {
        console.log(e);
        message.error('Click on No');
    }
    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Card >
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/commodity">商品列表</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/uploadImgs" style={{ fontSize: "16px" }}>上传商品图片</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </Card>
            <Card>
                {/* <Upload {...props}>
                    <Button icon={<UploadOutlined />}>点击上传图片</Button>
                </Upload> */}

                <Table dataSource={dataSource} columns={columns} pagination={false} />

            </Card>
            <Card>

                <Table dataSource={detailsData} columns={columnsDetails} pagination={false} />
            </Card>

        </Space>
    )
}